<template>
  <view class="select-pos">
    <view class="cm-flex cm-flex-a-center">
      <view class="select-pos-padding cm-flex-s-0">
        <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="clickPosSetHandler">
          <cm-icon type="iconfont icon-category"></cm-icon>
        </cm-button>    
        <cm-button cm-class="cm-margin-top-5" type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="resetHandler">
          <cm-icon type="iconfont icon-return"></cm-icon>
        </cm-button> 
      </view>

      <view class="cm-flex-g-1 app-border-color_ex-left">
        <view class="select-pos-padding cm-flex cm-flex-a-center cm-flex-j-between app-border-color_ex-bottom">
          <view>类型：{{ typesList[curTypeIndex] }}</view>
          <view class="cm-flex cm-flex-a-center cm-flex-s-0">
            <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
              class="cm-margin-right-10"
              @click="typeOffsetHandler(-1)">
              <cm-icon type="iconfont icon-arrow-lift"></cm-icon>
            </cm-button>
            <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
              @click="typeOffsetHandler(1)">
              <cm-icon type="iconfont icon-arrow-right"></cm-icon>
            </cm-button>
          </view>
        </view>
        <view class="select-pos-padding cm-flex cm-flex-a-center cm-flex-j-between">
          <view>角度：{{ angleText }}</view>
          <view class="cm-flex cm-flex-a-center cm-flex-s-0">
            <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
              class="cm-margin-right-10"
              @click="angleOffsetHandler(-1)">
              <cm-icon type="iconfont icon-arrow-lift"></cm-icon>
            </cm-button>
            <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
              @click="angleOffsetHandler(1)">
              <cm-icon type="iconfont icon-arrow-right"></cm-icon>
            </cm-button>
          </view>
        </view>
      </view>
    </view>
    
    <cm-picker-popup ref="posPicker" :picker-data="posPickerList" @confirm="selectPosHandler" exist></cm-picker-popup>
  </view>
</template>

<script src="./selectPos.js"></script>

<style lang="stylus">
@import './selectPos.styl'
</style>
